<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie ref="pie" style="height: 300px;" :value="pieData" text="监控统计"></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-bar ref="bar" style="height: 300px;" :value="barData" text="近七日 9:10 之前人数统计" />
        </Card>
      </i-col>
    </Row>
    <Row>
      <Card shadow>
        <example style="height: 310px;"/>
      </Card>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data () {
    return {
      // inforCardData: [
      //   { title: '新增用户', icon: 'md-person-add', count: 803, color: '#2d8cf0' },
      //   { title: '累计点击', icon: 'md-locate', count: 232, color: '#19be6b' },
      //   { title: '新增问答', icon: 'md-help-circle', count: 142, color: '#ff9900' },
      //   { title: '分享统计', icon: 'md-share', count: 657, color: '#ed3f14' },
      //   { title: '新增互动', icon: 'md-chatbubbles', count: 12, color: '#E46CBB' },
      //   { title: '新增页面', icon: 'md-map', count: 14, color: '#9A66E4' }
      // ],
      inforCardData: [
        { title: '今日进入', icon: 'md-person-add', count: 0, color: '#2d8cf0' },
        { title: '今日流出', icon: 'md-person', 'count': 0, 'color': '#19be6b' },
        { title: '今日滞留', icon: 'md-locate', count: 0, color: '#9A66E4' }
      ],
      pieData: [
        { value: 0, name: '未到人数' },
        { value: 0, name: '实到人数' }
      ],
      // pieData: [
      //   { value: 335, name: '直接访问' },
      //   { value: 310, name: '邮件营销' },
      //   { value: 234, name: '联盟广告' },
      //   { value: 135, name: '视频广告' },
      //   { value: 1548, name: '搜索引擎' }
      // ],
      // barData: {
      //   Mon: 900,
      //   Tue: 10,
      //   Wed: 5,
      //   Thu: 0,
      //   Fri: 0,
      //   Sat: 0,
      //   Sun: 0
      // },
      barData: {}
    }
  },
  methods: {
    setPieData () {
      this.$axios.get('/api/flow', {}, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then((response) => {
        if (response.data.success) {
          let res_data = response.data.data
          this.inforCardData[0].count = res_data.today_in
          this.inforCardData[1].count = res_data.today_out
          this.inforCardData[2].count = res_data.today_stay
          this.pieData[0].value = res_data.should_stay - res_data.today_stay
          this.pieData[1].value = res_data.today_stay
          console.log(this.pieData)
          this.$refs.bar.init()
          this.$refs.pie.init()
        }
      }).catch((response) => {
        console.log(response)
      })
    },
    setBarData () {
      this.$axios.get('/api/flow/week/', {}, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then((response) => {
        if (response.data.success) {
          console.log(response.data.data)
          let tpm_barData = response.data.data
          for (let i = tpm_barData.length - 1; i >= 0; i--) {
            console.log(tpm_barData[i].date)
            this.barData[tpm_barData[i].date.slice(5)] = tpm_barData[i].num
          }
          console.log(this.barData)
        }
      }).catch((response) => {
        console.log(response)
      })
    }
  },
  mounted () {
    this.setPieData()
    this.setBarData()
    setInterval(() => {
      this.setPieData()
      this.setBarData()
    }, 2000)
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}
</style>
